import React from 'react';
import { View, Image } from '@tarojs/components';
import './index.less';
import classNames from 'classnames';
import { AtList } from 'taro-ui';
// 品牌子组件
export interface brandItemProps {
  /** 取消按钮点击事件 */
  gotoDetail: (item: any) => void;
  data?: any;
}

export default function BrandItem({ gotoDetail, data }: brandItemProps) {
  const brandContainerClass = classNames('brand-item-container');
  return (
    <View className={brandContainerClass}>
      <AtList hasBorder={false} key={data.sku}>
        <View onClick={() => gotoDetail(data.sku)}>
          <View className="brand-detail-title">
            {data.productNameEn || 'englinshName'}
          </View>
          <View className="brand-detail-name">{data.productName}</View>
          <Image className="brand-detail-img" src={data.productImg} />
        </View>
      </AtList>
    </View>
  );
}
